/**
 * @description vue3 + element plus二次封装：表格/表单操作
 * @description 表格配置
 * @param 其余参数参考element plus官网
 * @param {String} type 类型：input输入框，select下拉框，tree树结构，number数字，date时间，type只要存在则被el-form-item包裹
 * @param {Boolean} required 是否必填，默认false
 * @param {Array} option 下拉选项，选择器和树结构需要
 * @param {Object} optionConfig 下拉选项对象集合，在组件中传入{xxx: []}
 * @param {Boolean|String} disabled 为字符串时，disabledConfig和disabledKeys必须存在一个，如果都存在则互相对比，相同值则禁用
 * @param {String} disabledKeys 禁用对比字段：转递当前行需要对比字段key
 * @param {String} slotName 自定义插槽名称
 * @param {String} slotForm 自定义插槽名称，el-form-item标签包裹
 */

const 案例 = {
  label: '用户名',
  prop: 'key',
  type: 'select',
  option: 'selectOptions' || [],
  disabled: true || 'key',
  disabledKeys: 'key2', // key === key2
  required: true, // 默认false
  name: 'userName', // 等同于当前select赋值name = userName
  // 跟name类型，对象形式书写，一对多
  params: {
    name: 'userName',
    age: 'ages'
  },
  slotName: 'key' // 组件使用
}

/**
 * @description 下列是 v-table或自己修改命名 组件配置则是在组件定义
 * @param {Object} formParam 必传：绑定整个表单/表格，为搜索可传递参数给接口
 * @param {String} keys 当有添加行等，需要绑定并保存数组字段传递给后端使用
 * @param {Function} apiFn 必传：传递接口函数，不需要分页则pagination为false
 * @param {Object} apiParam 接口传递默认参数，优先级高于formParam
 * @param {Boolean} inline 是否内联模式，为false隐藏查询/重置按钮，默认true
 * @param {Boolean} isTitle 是否需要表单title，默认true
 * @param {Object} formConfig 在组件中传入的formConfig对象，el-form表单参数
 * @param {Function} onChangeValue 表单监听集合，根据type筛选，也可在config根据key自定义
 * @param {Object} disabledConfig 在组件中传入的disabledConfig对象，用于对比disabledKeys或其他值
 * @param {Object} inputConfig 在组件中根据type类型传入 “type”Config对象，input/textarea则是inputConfig，select/tree共用selectConfig等...对于各输入框选择参数，参数参考element table或可自定义
 * 其余必传参数请根据 element表单/表格 正常传入即可，具体看demo
 */

// 表格通过prop绑定字段，因为element要求prop必传，key字段不可删除，添加行等输入框/选择器绑定需要，其余参数一样
const table = {
  propList: [
    {
      label: '用户名',
      prop: 'name',
      slotName: 'name'
    }
  ],
  // 序号
  showIndex: true,
  // 复选框
  showSelect: false,
  // 分页
  showFooter: true,
  // 是否固定序号/复选框
  showFixed: false
}
// 表单通过key绑定字段，其余参数一样
const form = [
  {
    key: 'name',
    label: '名字',
    type: 'input',
    if: (data) => {}
  }
]
const keys = 'addList'
const formParam = ref({})
const 组件案例 = `<v-table  
                    :keys="keys" // formParam[keys]
                    :formParam="formParam" // 双向数据绑定参数对象:apiFn="接口"
                    :apiParam="{ current: 1, size: 10 }"
                    :form="form" // 表单数据
                    :query="form" // 搜索
                    :table="table" // 表格数据
                    :formConfig="{}"
                    :inputConfig="{}"
                    :selectConfig="{}"
                    :disabledConfig="{}"
                    :pagination="false" // 默认true
                  />`
